﻿@{
    ViewBag.Title = "Configurations";
    Layout = "~/Views/Master/_LoggedInLayout.cshtml";
}

@section RootBreadCrumb {
    Overview
}

@section headerscripts{
    <script type="text/javascript">
        //General functions~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        var entryLinkUrl = "/ConfigurationEditor/ConfigurationEditor/";

        function calcWidth() {
            //Set width for ModelsBox
            var containerWidth = $(".OuterContentArea .InnerContentArea").width();
            var marginWidth = 30;
            var actionsBoxWidth = $("#ConfigurationsActionsBox").width();
            var modelsBoxWidth = containerWidth - marginWidth - actionsBoxWidth;
            $('#ConfigurationsBox').css("width", modelsBoxWidth + "px");
        }
        function deleteConfiguration(configurationID) {
            var tbody = $("#ConfigurationsTable").children("tbody");
            //Delete Model from DB
            $.ajax({
                url: "/Configurations/DeleteConfiguration",
                data: JSON.stringify({ ID: configurationID }),
                success: function (reponse) {
                    //
                    deleteRow(configurationID, tbody);
                }
            });

        }
        //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        //Load~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        $(document).ready(function () {

            //Initialize
            calcWidth();
            $(window).resize(function () {
                calcWidth();
            });
            $("#ConfigurationsMenuItem").attr("selected", "selected");

            //Load Configurations
            $.ajax({
                url: "/Configurations/GetConfigurations",
                data: {},
                beforeSend: function () {
                    $("#ConfigurationsBox").block({ message: "Loading data...", fadeIn: 300 });
                },
                success: function (configurations) {
                    $.timer(300, function () {

                        //Variables
                        var configurationsTable = $("#ConfigurationsTable");
                        var headerColumns = $(configurationsTable).find("th");
                        var tbody = $(configurationsTable).children("tbody");

                        //Create a TR for each row 
                        for (var i = 0; i < configurations.length; i++) {
                            createRow(headerColumns, tbody, configurations[i], entryLinkUrl, deleteConfiguration);
                        }

                        $("#ConfigurationsBox").unblock();
                    });
                }
            });

        });
        //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    </script>
}

<div id="ConfigurationsActionsBox" class="RoundedBox">
    <div class="BoxHeader">
        <div class="BoxInnerHeader">
            <span class="HeaderLabel">Actions</span>
        </div>
    </div>
    <div class="BoxContent">
        <ul class="ActionList">
            <li class="Button-Normal" disabled="disabled">
                <img src="../../Content/themes/base/images/Icons/NewModel.png" />
                <span>New Configuration</span> </li>
        </ul>
    </div>
    <div class="BoxFooter">
        <div class="BoxInnerFooter">
        </div>
    </div>
</div>
<div id="ConfigurationsBox" class="RoundedBox">
    <div class="BoxHeader">
        <div class="BoxInnerHeader">
            <span class="HeaderLabel">Models</span>
        </div>
    </div>
    <div class="BoxContent">
        <table cellpadding="0" cellspacing="0" id="ConfigurationsTable" class="grid">
            <thead>
                <tr>
                    <th style="width: 35%; padding-left: 15px;">
                        <span columnname="Name">Name</span>
                    </th>

                    <th style="width: 20%; padding-left: 15px;">
                        <span columnname="ModelName">Model</span>
                    </th>
                    <th style="width: 20%; padding-left: 15px;">
                        <span columnname="UITemplateName">UI Template</span>
                    </th>
                    <th style="width: 20%;text-align: center">
                        <span columnname="LastModifiedDateFormatted">Modified Date</span>
                    </th>
                    <th style="width: 20%;text-align: center">
                        <span columnname="CreatedDateFormatted">Created Date</span>
                    </th>
                    <th style="text-align: center;padding-right: 15px;">
                        <span>Actions</span>
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <div class="BoxFooter">
        <div class="BoxInnerFooter">
        </div>
    </div>
</div>